document.addEventListener('DOMContentLoaded', function() {
    console.log('页面加载完成，开始获取用户信息'); // 调试日志
    
    // 检查表单元素是否存在
    const form = document.getElementById('profile-form');
    console.log('表单检查:', {
        form: form ? '存在' : '不存在',
        username: form?.querySelector('[name="username"]') ? '存在' : '不存在',
        phone: form?.querySelector('[name="phone"]') ? '存在' : '不存在',
        email: form?.querySelector('[name="email"]') ? '存在' : '不存在',
        avatar: form?.querySelector('.avatar-preview') ? '存在' : '不存在'
    });
    
    // 获取用户信息
    fetchUserInfo();
    
    // 初始化表单提交
    initFormSubmit();
    
    // 初始化头像上传
    initAvatarUpload();
    
    // 初始化导航切换
    initNavigation();
    
    // 初始化账户设置
    initAccountSettings();
    
    // // 初始化安全设置
    // initSecuritySettings();
    
    // 初始化订单列表
    initOrderList();
    
    // 初始化收藏列表
    initFavoriteList();
    
    // 初始化评价列表
    initReviewList();
});

// 初始化用户信息
function initUserInfo() {
    // 从localStorage获取用户信息
    const userInfo = JSON.parse(getItemWithExpiry('userInfo')) || {
        username: '游客'
    };
    
    // 更新导航栏用户名
    const usernameElement = document.querySelector('.username');
    if (usernameElement) {
        usernameElement.textContent = userInfo.username;
    }
    
    // 更新导航栏头像
    const navAvatar = document.querySelector('.user-avatar');
    if (navAvatar) {
        console.log('更新导航栏头像:', userInfo.avatar);
        navAvatar.src = userInfo.avatar || 'images/avatar.jpg';
    }
}

// 初始化导航切换
function initNavigation() {
    const navItems = document.querySelectorAll('.profile-nav-item');
    const sections = document.querySelectorAll('.profile-section');
    
    // 确保所有section默认隐藏，除了账户设置部分
    sections.forEach(section => {
        if (!section.querySelector('.section-title')?.textContent.includes('账户设置')) {
            section.style.display = 'none';
        } else {
            section.style.display = 'block';
        }
    });
    
    navItems.forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除所有active类
            navItems.forEach(nav => nav.classList.remove('active'));
            
            // 隐藏所有section，除了账户设置部分
            sections.forEach(section => {
                if (!section.querySelector('.section-title')?.textContent.includes('账户设置')) {
                    section.style.display = 'none';
                }
            });
            
            // 添加active类到当前项
            this.classList.add('active');
            
            // 显示对应的section
            const targetId = this.getAttribute('href').substring(1);
            const targetSection = document.getElementById(targetId);
            if (targetSection) {
                targetSection.style.display = 'block';
            }
        });
    });
}

// 初始化表单提交
function initFormSubmit() {
    const form = document.getElementById('profile-form');
    if (form) {
        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const userId = getItemWithExpiry('userId');
            if (!userId) {
                window.location.href = 'login.html';
                return;
            }

            // 安全获取表单值的方法
            function getFormValue(id) {
                const element = document.getElementById(id);
                return element ? element.value : '';
            }

            const formData = {
                username: getFormValue('username'),
                trueName: getFormValue('trueName'),
                sex: getFormValue('sex'),
                birthday: getFormValue('birthday'),
                adress: getFormValue('adress'),
                phone: getFormValue('phone'),
                email: getFormValue('email')
            };

            try {
                const response = await fetch(`http://localhost:8080/user/${userId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'userId': userId
                    },
                    body: JSON.stringify(formData)
                });

                if (!response.ok) {
                    throw new Error('更新用户信息失败');
                }

                const result = await response.json();
                if (result.message === 'success') {
                    alert('个人信息更新成功');
                    // 更新本地存储的用户信息
                    const userInfo = JSON.parse(getItemWithExpiry('userInfo')) || {};
                    setItemWithExpiry('userInfo', JSON.stringify({...userInfo, ...formData}), 7 * 24 * 60);
                    // 重新获取并显示用户信息
                    fetchUserInfo();
                } else {
                    alert(result.message || '更新失败，请稍后重试');
                }
            } catch (error) {
                console.error('更新用户信息失败:', error);
                alert('更新失败，请稍后重试');
            }
        });
    }
}

// 初始化头像上传
function initAvatarUpload() {
    const avatarInput = document.getElementById('avatar');
    const avatarPreview = document.querySelector('.avatar-preview');
    const uploadButton = document.getElementById('upload-avatar');
    let selectedFile = null; // 存储选择的文件
    
    if (avatarInput && avatarPreview && uploadButton) {
        console.log('初始化头像上传组件'); // 调试日志
        
        // 设置默认头像
        if (!avatarPreview.src || avatarPreview.src.includes('undefined')) {
            avatarPreview.src = 'images/avatar.jpg';
        }
        
        // 监听文件选择
        avatarInput.addEventListener('change', function(e) {
            console.log('文件选择事件触发'); // 调试日志
            const file = e.target.files[0];
            if (file) {
                console.log('选择了文件:', file.name); // 调试日志
                
                // 验证文件类型和大小
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                
                if (!isJPG) {
                    alert('上传头像图片只能是 JPG 格式!');
                    return;
                }
                if (!isLt2M) {
                    alert('上传头像图片大小不能超过 2MB!');
                    return;
                }

                // 预览图片
                const reader = new FileReader();
                reader.onload = function(e) {
                    console.log('文件读取完成，显示预览'); // 调试日志
                    // 使用URL.createObjectURL创建预览URL
                    avatarPreview.src = URL.createObjectURL(file);
                    selectedFile = file; // 保存选择的文件
                };
                reader.readAsDataURL(file);
            }
        });

        // 添加上传按钮点击事件
        uploadButton.addEventListener('click', async function() {
            console.log('点击上传按钮'); // 调试日志
            if (!selectedFile) {
                alert('请先选择头像图片！');
                return;
            }

            try {
                const userId = getItemWithExpiry('userId');
                if (!userId) {
                    window.location.href = 'login.html';
                    return;
                }

                // 创建 FormData 对象
                const formData = new FormData();
                formData.append('avatar', selectedFile);

                console.log('开始上传头像...'); // 调试日志

                // 发送文件到后端
                const response = await fetch(`http://localhost:8080/user/${userId}/avatar`, {
                    method: 'POST',
                    headers: {
                        'userId': userId
                    },
                    body: formData
                });

                console.log('收到服务器响应:', response.status); // 调试日志

                if (!response.ok) {
                    throw new Error('上传头像失败');
                }

                const result = await response.json();
                console.log('服务器返回数据:', result); // 调试日志

                // 检查返回的数据格式
                if (result.code === 200 && result.message === 'success' && result.data) {
                    // 更新头像显示
                    const newAvatarUrl = result.data;
                    
                    // 更新本地存储的用户信息
                    const userInfo = JSON.parse(getItemWithExpiry('userInfo')) || {};
                    userInfo.image = newAvatarUrl;
                    userInfo.avatar = newAvatarUrl;
                    setItemWithExpiry('userInfo', JSON.stringify(userInfo), 7 * 24 * 60);
                    
                    selectedFile = null;
                    alert('头像上传成功！');
                    
                    // 更新所有导航栏头像
                    const navAvatars = document.querySelectorAll('.user-avatar');
                    if (navAvatars.length > 0) {
                        const timestamp = new Date().getTime();
                        const avatarUrl = `${newAvatarUrl}?t=${timestamp}`;
                        
                        navAvatars.forEach(avatar => {
                            avatar.src = avatarUrl;
                        });
                    }
                    
                    // 更新预览头像
                    const avatarPreview = document.querySelector('.avatar-preview');
                    if (avatarPreview) {
                        const timestamp = new Date().getTime();
                        avatarPreview.src = `${newAvatarUrl}?t=${timestamp}`;
                    }
                    
                    // 刷新用户信息
                    if (window.refreshUserInfo) {
                        window.refreshUserInfo();
                    }
                    
                    // 延迟刷新页面
                    setTimeout(() => {
                        window.location.reload();
                    }, 300);
                } else {
                    throw new Error(result.message || '上传失败');
                }
            } catch (error) {
                console.error('上传头像失败：', error);
                alert(error.message || '头像上传失败，请重试！');
            }
        });
    } else {
        console.error('未找到必要的DOM元素:', {
            avatarInput: !!avatarInput,
            avatarPreview: !!avatarPreview,
            uploadButton: !!uploadButton
        });
    }
}

// 修改密码
async function changePassword(oldPassword, newPassword) {
    try {
        const userId = getItemWithExpiry('userId');
        if (!userId) {
            window.location.href = 'login.html';
            return;
        }

        const response = await fetch(`http://localhost:8080/user/${userId}/password`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'userId'  : userId
            },
            body: JSON.stringify({
                oldPassword,
                newPassword
            })
        });

        const result = await response.json();
        if (result.code === 200) {
            alert('密码修改成功！');
            return true;
        } else {
            alert(result.message || '密码修改失败');
            return false;
        }
    } catch (error) {
        console.error('修改密码失败:', error);
        alert('修改密码失败，请稍后重试');
        return false;
    }
}

// 初始化账户设置
function initAccountSettings() {
    console.log('初始化账户设置');
    
    // 找到账户设置部分
    const sections = document.querySelectorAll('.profile-section');
    let settingsSection = null;
    
    // 遍历所有section找到账户设置部分
    sections.forEach(section => {
        const title = section.querySelector('.section-title');
        if (title && title.textContent === '账户设置') {
            settingsSection = section;
        }
    });
    
    console.log('账户设置部分:', settingsSection);
    
    if (!settingsSection) {
        console.error('未找到账户设置部分');
        return;
    }
    
    // 设置section样式
    settingsSection.style.display = 'block';
    settingsSection.style.visibility = 'visible';
    settingsSection.style.opacity = '1';
    settingsSection.style.padding = '20px';
    settingsSection.style.backgroundColor = '#fff';
    settingsSection.style.borderRadius = '8px';
    settingsSection.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
    
    // 设置标题样式
    const title = settingsSection.querySelector('.section-title');
    if (title) {
        title.style.fontSize = '20px';
        title.style.fontWeight = '600';
        title.style.color = '#333';
        title.style.marginBottom = '20px';
        title.style.paddingBottom = '10px';
        title.style.borderBottom = '1px solid #eee';
    }
    
    // 确保设置列表可见
    const settingsList = settingsSection.querySelector('.settings-list');
    if (settingsList) {
        settingsList.style.display = 'block';
        settingsList.style.visibility = 'visible';
        settingsList.style.opacity = '1';
        settingsList.style.marginTop = '10px';
    }
    
    // 获取所有设置项
    const settingsItems = settingsSection.querySelectorAll('.settings-item');
    console.log('设置项数量:', settingsItems.length);
    
    // 为每个设置项添加点击事件和样式
    settingsItems.forEach(item => {
        console.log('设置项:', item);
        
        // 设置项样式
        item.style.display = 'flex';
        item.style.alignItems = 'center';
        item.style.padding = '15px';
        item.style.marginBottom = '10px';
        item.style.backgroundColor = '#f8f9fa';
        item.style.borderRadius = '6px';
        item.style.transition = 'all 0.3s ease';
        item.style.cursor = 'pointer';
        item.style.textDecoration = 'none';
        item.style.color = '#333';
        
        // 悬停效果
        item.addEventListener('mouseover', function() {
            this.style.backgroundColor = '#e9ecef';
            this.style.transform = 'translateX(5px)';
        });
        
        item.addEventListener('mouseout', function() {
            this.style.backgroundColor = '#f8f9fa';
            this.style.transform = 'translateX(0)';
        });
        
        // 图标样式
        const icon = item.querySelector('.fa');
        if (icon) {
            icon.style.marginRight = '10px';
            icon.style.fontSize = '18px';
            icon.style.color = '#007bff';
        }
        
        // 文本样式
        const text = item.querySelector('span');
        if (text) {
            text.style.flex = '1';
            text.style.fontSize = '16px';
        }
        
        // 箭头图标样式
        const arrow = item.querySelector('.fa-chevron-right');
        if (arrow) {
            arrow.style.color = '#999';
            arrow.style.fontSize = '14px';
        }
        
        item.addEventListener('click', function(e) {
            e.preventDefault();
            const settingType = this.querySelector('span').textContent;
            console.log('点击设置项:', settingType);
            
            switch(settingType) {
                case '修改密码':
                    const oldPassword = prompt('请输入原密码：');
                    if (oldPassword) {
                        const newPassword = prompt('请输入新密码：');
                        if (newPassword) {
                            const confirmPassword = prompt('请确认新密码：');
                            if (newPassword === confirmPassword) {
                                // 这里应该调用后端API修改密码
                                changePassword( oldPassword,newPassword);
                            } else {
                                alert('两次输入的密码不一致！');
                            }
                        }
                    }
                    break;
                    
                case '消息通知':
                    // 这里可以添加消息通知设置的处理逻辑
                    alert('消息通知设置功能开发中...');
                    break;
                    
                case '隐私设置':
                    // 这里可以添加隐私设置的处理逻辑
                    alert('隐私设置功能开发中...');
                    break;
            }
        });
    });
}

// // 初始化安全设置
// function initSecuritySettings() {
//     const securitySection = document.getElementById('security');
//     if (!securitySection) return;
    
//     // 确保安全设置部分可见
//     securitySection.style.display = 'block';
    
//     // 修改密码
//     const changePasswordBtn = document.getElementById('change-password');
//     if (changePasswordBtn) {
//         changePasswordBtn.addEventListener('click', function() {
//             const oldPassword = prompt('请输入原密码：');
//             if (oldPassword) {
//                 const newPassword = prompt('请输入新密码：');
//                 if (newPassword) {
//                     const confirmPassword = prompt('请确认新密码：');
//                     if (newPassword === confirmPassword) {
//                         // 这里应该调用后端API修改密码
//                         alert('密码修改成功！');
//                     } else {
//                         alert('两次输入的密码不一致！');
//                     }
//                 }
//             }
//         });
//     }
    
//     // 更换手机
//     const changePhoneBtn = document.getElementById('change-phone');
//     if (changePhoneBtn) {
//         changePhoneBtn.addEventListener('click', function() {
//             const newPhone = prompt('请输入新手机号：');
//             if (newPhone) {
//                 // 这里应该调用后端API更换手机
//                 alert('手机号更换成功！');
//             }
//         });
//     }
    
//     // 更换邮箱
//     const changeEmailBtn = document.getElementById('change-email');
//     if (changeEmailBtn) {
//         changeEmailBtn.addEventListener('click', function() {
//             const newEmail = prompt('请输入新邮箱：');
//             if (newEmail) {
//                 // 这里应该调用后端API更换邮箱
//                 alert('邮箱更换成功！');
//             }
//         });
//     }
// }

// 初始化订单列表
function initOrderList() {
    const orderSection = document.getElementById('orders');
    if (!orderSection) return;
    
    // 确保订单部分可见
    orderSection.style.display = 'block';
    
    const orderTabs = document.querySelectorAll('.order-tab');
    const orderList = document.getElementById('order-list');
    
    if (orderTabs.length && orderList) {
        orderTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除所有active类
                orderTabs.forEach(t => t.classList.remove('active'));
                
                // 添加active类到当前项
                this.classList.add('active');
                
                // 获取订单状态
                const status = this.getAttribute('data-status');
                
                // 加载对应状态的订单
                loadOrders(status);
            });
        });
        
        // 初始加载全部订单
        loadOrders('all');
    }
}

// 加载订单列表
function loadOrders(status) {
    const orderList = document.getElementById('order-list');
    if (!orderList) return;
    
    // 这里应该调用后端API获取订单数据
    // 示例数据
    const orders = [
        {
            id: '1',
            title: '古汉台门票',
            date: '2024-03-15',
            status: 'completed',
            price: '50'
        },
        {
            id: '2',
            title: '武侯祠门票',
            date: '2024-03-20',
            status: 'unused',
            price: '60'
        }
    ];
    
    // 过滤订单
    const filteredOrders = status === 'all' 
        ? orders 
        : orders.filter(order => order.status === status);
    
    // 渲染订单列表
    orderList.innerHTML = filteredOrders.map(order => `
        <div class="order-item">
            <div class="order-info">
                <h3>${order.title}</h3>
                <p>订单号：${order.id}</p>
                <p>下单时间：${order.date}</p>
                <p>金额：￥${order.price}</p>
            </div>
            <div class="order-status">
                <span class="status-${order.status}">${getStatusText(order.status)}</span>
            </div>
        </div>
    `).join('');
}

// 获取订单状态文本
function getStatusText(status) {
    const statusMap = {
        'unpaid': '待付款',
        'unused': '待使用',
        'completed': '已完成'
    };
    return statusMap[status] || status;
}

// 初始化收藏列表
function initFavoriteList() {
    const favoriteSection = document.getElementById('favorites');
    if (!favoriteSection) return;
    
    // 确保收藏部分可见
    favoriteSection.style.display = 'block';
    
    const favoriteTabs = document.querySelectorAll('.favorite-tab');
    const favoriteList = document.getElementById('favorite-list');
    
    if (favoriteTabs.length && favoriteList) {
        favoriteTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除所有active类
                favoriteTabs.forEach(t => t.classList.remove('active'));
                
                // 添加active类到当前项
                this.classList.add('active');
                
                // 获取收藏类型
                const type = this.getAttribute('data-type');
                
                // 加载对应类型的收藏
                loadFavorites(type);
            });
        });
        
        // 初始加载景点收藏
        loadFavorites('scenic');
    }
}

// 加载收藏列表
function loadFavorites(type) {
    const favoriteList = document.getElementById('favorite-list');
    if (!favoriteList) return;
    
    // 这里应该调用后端API获取收藏数据
    // 示例数据
    const favorites = [
        {
            id: '1',
            title: '古汉台',
            type: 'scenic',
            image: 'images/scenic1.jpg'
        },
        {
            id: '2',
            title: '武侯祠',
            type: 'scenic',
            image: 'images/scenic2.jpg'
        }
    ];
    
    // 过滤收藏
    const filteredFavorites = favorites.filter(favorite => favorite.type === type);
    
    // 渲染收藏列表
    favoriteList.innerHTML = filteredFavorites.map(favorite => `
        <div class="favorite-item">
            <img src="${favorite.image}" alt="${favorite.title}">
            <div class="favorite-info">
                <h3>${favorite.title}</h3>
                <button class="remove-favorite" data-id="${favorite.id}">
                    <i class="fa fa-heart"></i> 取消收藏
                </button>
            </div>
        </div>
    `).join('');
    
    // 绑定取消收藏事件
    document.querySelectorAll('.remove-favorite').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.getAttribute('data-id');
            // 这里应该调用后端API取消收藏
            alert('取消收藏成功！');
            loadFavorites(type);
        });
    });
}

// 初始化评价列表
function initReviewList() {
    const reviewSection = document.getElementById('reviews');
    if (!reviewSection) return;
    
    // 确保评价部分可见
    reviewSection.style.display = 'block';
    
    const reviewList = document.getElementById('review-list');
    if (reviewList) {
        // 这里应该调用后端API获取评价数据
        // 示例数据
        const reviews = [
            {
                id: '1',
                title: '古汉台',
                content: '环境优美，历史文化氛围浓厚，值得一游！',
                date: '2024-03-15',
                rating: 5
            },
            {
                id: '2',
                title: '武侯祠',
                content: '三国文化的重要遗址，讲解很详细。',
                date: '2024-03-20',
                rating: 4
            }
        ];
        
        // 渲染评价列表
        reviewList.innerHTML = reviews.map(review => `
            <div class="review-item">
                <div class="review-header">
                    <h3>${review.title}</h3>
                    <div class="review-rating">
                        ${'★'.repeat(review.rating)}${'☆'.repeat(5-review.rating)}
                    </div>
                </div>
                <p class="review-content">${review.content}</p>
                <p class="review-date">${review.date}</p>
            </div>
        `).join('');
    }
}

// 处理本地存储的工具函数
function getItemWithExpiry(key) {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) {
        return null;
    }
    const item = JSON.parse(itemStr);
    const now = new Date();
    if (now.getTime() > item.expiry) {
        localStorage.removeItem(key);
        return null;
    }
    return item.value;
}

// 设置带过期时间的本地存储
function setItemWithExpiry(key, value, ttl) {
    const now = new Date();
    const item = {
        value: value,
        expiry: now.getTime() + (ttl * 60 * 1000) // ttl 单位为分钟
    };
    localStorage.setItem(key, JSON.stringify(item));
}

// 获取用户信息
async function fetchUserInfo() {
    const userId = getItemWithExpiry('userId');
    console.log('当前用户ID:', userId); // 调试日志
    
    if (!userId) {
        window.location.href = 'login.html';
        return;
    }

    try {
        const response = await fetch(`http://localhost:8080/user/${userId}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'userId': userId
            }
        });

        if (!response.ok) {
            throw new Error('获取用户信息失败');
        }

        const userData = await response.json();
        console.log('获取到的用户数据:', userData); // 调试日志
        
        // 保存到本地存储
        setItemWithExpiry('userInfo', JSON.stringify(userData), 7 * 24 * 60);
        
        // 显示用户信息
        displayUserInfo(userData);
    } catch (error) {
        console.error('获取用户信息失败:', error);
        alert('获取用户信息失败，请稍后重试');
    }
}

// 显示用户信息
function displayUserInfo(userData) {
    console.log('正在显示用户信息:', userData);
    
    if (!userData.data) {
        console.error('用户数据格式不正确:', userData);
        return;
    }
    
    const user = userData.data;
    const defaultAvatar = 'images/avatar.jpg';
    
    // 验证头像URL是否有效
    function isValidImageUrl(url) {
        if (!url) return false;
        return url.startsWith('http://') || url.startsWith('https://') || url.startsWith('images/');
    }
    
    // 更新个人信息表单
    const form = document.getElementById('profile-form');
    if (!form) {
        console.error('未找到表单');
        return;
    }
    
    // 确保表单和其父元素可见
    const formSection = form.closest('.profile-section');
    if (formSection) {
        formSection.style.display = 'block';
        formSection.style.visibility = 'visible';
        formSection.style.opacity = '1';
    }
    
    form.style.display = 'block';
    form.style.visibility = 'visible';  
    form.style.opacity = '1';
    
    // 设置所有输入框的值
    const fields = {
        'username': user.username,
        'trueName': user.trueName,
        'birthday': user.birthday,
        'adress': user.adress,
        'phone': user.phone,
        'email': user.email
    };
    
    // 遍历所有字段并设置值
    Object.entries(fields).forEach(([fieldName, value]) => {
        const input = document.getElementById(fieldName);
        if (input) {
            input.value = value || '';
            input.style.display = 'block';
            input.style.visibility = 'visible';
            input.style.opacity = '1';
            input.removeAttribute('readonly');
            input.removeAttribute('disabled');
            console.log(`设置${fieldName}:`, value);
        } else {
            console.warn(`未找到字段: ${fieldName}`);
        }
    });
    
    // 特别处理性别字段
    const sexSelect = document.getElementById('sex');
    if (sexSelect) {
        // 根据后端返回的性别值设置选项
        if (user.sex === '男' || user.sex === 'male') {
            sexSelect.value = 'male';
        } else if (user.sex === '女' || user.sex === 'female') {
            sexSelect.value = 'female';
        } else {
            sexSelect.value = ''; // 默认选择"请选择"
        }
        sexSelect.style.display = 'block';
        sexSelect.style.visibility = 'visible';
        sexSelect.style.opacity = '1';
        console.log('设置性别:', user.sex);
    }
    
    // 设置头像
    const avatarPreview = document.querySelector('.avatar-preview');
    console.log('设置头像预览:', user.image);
    if (avatarPreview) {
        // 处理头像URL
        let avatarUrl = user.image;
        
        // 检查URL是否有效
        if (!avatarUrl || avatarUrl === 'null' || avatarUrl === 'undefined') {
            avatarUrl = defaultAvatar;
        } else if (!avatarUrl.startsWith('http') && !avatarUrl.startsWith('/')) {
            avatarUrl = `http://localhost:8080/${avatarUrl}`;
        }
        
        // 添加时间戳防止缓存
        const timestamp = new Date().getTime();
        avatarUrl = `${avatarUrl}?t=${timestamp}`;
        
        // 设置头像
        avatarPreview.src = avatarUrl;
        avatarPreview.style.display = 'block';
        avatarPreview.style.width = '100px';
        avatarPreview.style.height = '100px';
        avatarPreview.style.objectFit = 'cover';
        avatarPreview.style.borderRadius = '50%';
        
        // 添加错误处理
        avatarPreview.onerror = function() {
            this.src = defaultAvatar;
        };
    }
    
    // 更新导航栏用户名和头像
    const usernameElement = document.querySelector('.username');
    if (usernameElement) {
        usernameElement.textContent = user.username || '游客';
    }
    
    // 更新所有导航栏头像
    const navAvatars = document.querySelectorAll('.user-avatar');
    if (navAvatars.length > 0) {
        let navAvatarUrl = user.image;
        
        // 检查URL是否有效
        if (!navAvatarUrl || navAvatarUrl === 'null' || navAvatarUrl === 'undefined') {
            navAvatarUrl = defaultAvatar;
        } else if (!navAvatarUrl.startsWith('http') && !navAvatarUrl.startsWith('/')) {
            navAvatarUrl = `http://localhost:8080/${navAvatarUrl}`;
        }
        
        // 添加时间戳防止缓存
        const timestamp = new Date().getTime();
        navAvatarUrl = `${navAvatarUrl}?t=${timestamp}`;
        
        // 批量更新头像
        navAvatars.forEach(navAvatar => {
            navAvatar.src = navAvatarUrl;
            navAvatar.style.width = '40px';
            navAvatar.style.height = '40px';
            navAvatar.style.objectFit = 'cover';
            navAvatar.style.borderRadius = '50%';
            
            // 添加错误处理
            navAvatar.onerror = function() {
                this.src = defaultAvatar;
            };
        });
    }
    
    // 检查表单布局
    const formGroups = form.querySelectorAll('.form-group');
    formGroups.forEach(group => {
        group.style.display = 'block';
        group.style.visibility = 'visible';
        group.style.opacity = '1';
        group.style.marginBottom = '20px';
    });
} 